import * as THREE from 'three';
// 导入轨道控制器
import  { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入坐标辅助器
import { AxesHelper } from "three/src/helpers/AxesHelper.js";
// 导入lil.gui
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min"
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 创建轨道控制器  必须在renderer创建之后，否则会声明违背定义的类型错误
const controls = new OrbitControls(camera, renderer.domElement);
// 设置阻尼惯性
controls.enableDamping = true;
// 设置阻尼系数
controls.dampingFactor = 0.05;
//设置自动旋转
controls.autoRotate = true;

renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// 创建几何体
const geometry = new THREE.BoxGeometry(1,1,1);

// 创建材质
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});

// 创建网格
const cube = new THREE.Mesh(geometry, material);

// 将几合体添加到场景
scene.add(cube);

camera.position.set(0, 0, 5);
camera.lookAt(0, 0, 0);

// 创建坐标辅助器
const axesHelper = new AxesHelper(5);
// 将坐标辅助器添加到场景中
scene.add(axesHelper);

// 设置渲染动画
function animate() {
    controls.update();
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();
// 监听窗口变化
window.addEventListener("resize", () => {
    renderer.setSize( window.innerWidth, window.innerHeight );
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
});

let eventObj = {
    Fullscreen(){
        document.body.requestFullscreen()
    },
    exitFullscreen(){
        document.body.exitFullscreen()
    }
}

const gui = new GUI();
gui.add(eventObj,'Fullscreen').name('全屏');
gui.add(eventObj,'exitFullscreen').name('退出全屏');

let cubeFolder = gui.addFolader('立方体')
cubeFolder.add(cube.position,'x').name('x轴位置');
cubeFolder.add(cube.position,'y').name('y轴位置');
cubeFolder.add(cube.position,'z').name('z轴位置');